<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../resources/css/base.css">
	<script type="text/javascript" src="../third-party/jQuery.js"></script>
	<script type="text/javascript" src="../resources/js/nwx.js"></script>
	
	<style>
		.tab {
			position: relative;
			overflow: hidden;
			background: #fff;
			width: 100%;
			font-family: 'Roboto', sans-serif;
			line-height: 1.5;
			font-weight: 300;
			color: #888;
			-webkit-font-smoothing: antialiased;
		}
		
		.tabs {
			display: table;
			position: relative;
			overflow: hidden;
			margin: 0;
			width: 100%;
			padding:0;
			border-bottom: 2px solid #87d3b7;
		}
		.tabs li {
			float: left;
			line-height: 38px;
			overflow: hidden;
			padding: 0;
			position: relative;
			-webkit-user-select: none;
		}
		.tabs a {
			background-color: #eff0f2;
			border-bottom: 1px solid #fff;
			color: #888;
			font-weight: 500;
			display: block;
			letter-spacing: 0;
			outline: none;
			padding: 0 20px;
			height:100%;
			text-decoration: none;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
			/*border-bottom: 2px solid #87d3b7;*/
		}
		
		.tabs_item {
			display: none;
			padding: 30px 0;
		}
		.tabs_item h4 {
			font-weight: bold;
			color: #87d3b7;
			font-size: 20px;
		}
		.tabs_item img {
			width: 200px;
			float: left;
			margin-right: 30px;
		}
		.tabs_item:first-child {
			display: block;
		}
		
		.current a {
			color: #fff;
			background: #87d3b7;
		}
	
	</style>
</head>
<body>
	<style>
		#list {
			list-style: none;
		}
		
		#list li {
			width:100px;
			display:inline-block;
		}
	</style>
	<ul id="list">
		<li><img src="" alt="">test</li>
	</ul>
	
	<script>
		~function ($) {
			let listfile = CONSTVAR.PROJECT_DIR + '/shortcuts.json';
			let listcontent = '';
			try {
				listcontent = CONSTVAR.NWFS.readFileSync(listfile);
			} catch(e) {
				console.warn('File not exist:' + listfile);
			}
			
			if(listcontent.length > 0) {
				generateList(JSON.parse(listcontent));
			} else {
				generateList(false);
			}
		}(jQuery);
		
		
		//生成列表
		function generateList(json) {
			if(!json) {
				$('#list').html(`<li style="text-align: center;width:100%;"><h3 style="color: #ddd;">No any shortcuts</h3></li>`);
				return;
			}
			
			let html = '';
			for (let i=0; i<json.length; i++) {
				let node = json[i];
				let target = node.target?node.target:'';
				let params = node.params?node.params:'';
				
				let cmd = target + ' ' + params;
				let ico = node.ico?'../' + node.ico:'';
				let name = node.name?node.name:'';
				
				html += `<li data-cmd="${params}"><img src="${ico}" alt="">${node.name}</li>`;
			}
			
			Q('#list').innerHTML = html;
		}
	</script>
</body>
</html>